<!-- 作者xxl,pickerValue为选择器的下标，rangeKey为选择选中后的展示的内容的字段 -->
<template>
	<div class="warp">
		<div class="picker-warp"  :class="isMust? 'must' : ''">
			<picker class="picker" mode="selector" @change="change" :value="pickerValue" :range-key="rangeKey" :range="list" :class="index < 0 ? 'off' : ''">
				{{index > -1 ? select : placeholder}}
			</picker>
		</div>
		<div class="icon down"><image src="/static/icons/arrowright.png" alt="" /></div>
	</div>
</template>
<script>
export default {
	data() {
		return {
			select:'',
			index: -1,
		};
	},
	props: {
		isMust: {
			type: Boolean,
			default: () => {
				return false
			}
		},
		placeholder: {
			type: String,
			default: () => {
				return '请选择';
			}
		},
		list: {
			type: Array,
			default: () => {
				return [];
			}
		},
		pickerValue: {
			type: Number,
			default: () => {
				return 0;
			}
		},
		rangeKey: {
			type: String,
			default: () => {
				return 'label';
			}
		},
		init: {
			type: String,
			default: () => {
				return '';
			}
		},

	},
	watch: {
		init(value){
			this.select = value
			this.index = 0
		},
		
	},
	methods: {
		change(e) {
			var obj = this.list[e.detail.value]
			this.select = obj[this.rangeKey]
			let number = parseInt(e.detail.value)
			this.index = number >= 0 ? number : 0
			this.$emit('change', e.detail.value);
			
		},
	}
};
</script>

<style scoped lang="scss">
.warp {
	display: flex;
	align-items: center;
	min-height: 60rpx;
	position: relative;
	input {
		width: 100%;
		height: 100%;
		font-size: 30rpx;
		line-height: 1;
		color: #000;
	}
	.icon {
		width: 18rpx;
		height: 30rpx;
		font-size: 0;
		margin-right: 20rpx;
		image {
			width: 100%;
			height: 100%;
		}
	}
	.picker-warp {
		width: 100%;
		padding: 0 20rpx;
		height: 100%;
		box-sizing:border-box;
		.picker {
			width: 100%;
			font-size: 30rpx;
			line-height: 80rpx;
			color: #000;
			white-space: nowrap;
			overflow: hidden;
			box-sizing: border-box;
			text-overflow: ellipsis;
		}
		.off {
			color: #999999!important;
		}
	}
}

.down {
	width: 30rpx;
	height: 20rpx;
	font-size: 0;
	margin-right: 5rpx;
	image {
		width: 100%;
		height: 100%;
	}
}
.must{
	&:after{
		content:"*";
		position:absolute;
		top:50%;
		left: -30rpx;
		transform: translateY(-50%);
		font-size: 40rpx;
		color: rgba(238, 47, 62, 1);
	}
}
</style>
